<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        body{font-size:12px;font-family:"微软雅黑";}
        
        p span{
            width:75px;
            display:inline-block;
            text-align:right;
            padding-right:10px;
            }
        .bd{
            width:600px;
            margin:0 auto;
            border:1px solid #ccc;
            padding:10px 10px;
        }
        </style>
</head>
<body>
    <div class="bd">
        <form action="#" method="get" autocomplete="off">
        <h2>表单信息表</h2>
        <p><span>用户名：</span><input type="text" name="yhm" required /></p>
        <p><span>密码：</span><input type="password" name="mm" required /></p>
        <p><span>性别：</span><input type="radio" name="xb"  checked="checked"/>男
         <input type="radio" name="xb"  checked="checked"/>女
        </p>
        <p><span>出生日期： </span><input type="date" />&nbsp;</p>
        <p><span>兴趣爱好：</span>
          <input type="checkbox" />唱歌
          <input type="checkbox" />跳舞
          <input type="checkbox" />游泳
          <input type="checkbox" />健身
        </p>
        <p><span>邮政编码：</span><input type="email" name="yx"  pattern="[0-9]{6}" placeholder="请输入6位数的邮政编码"/></p>
        <p><span>电话号码：</span><input type="tel" name="dhhm"   pattern="[0-9]{11}" placeholder="请输入11位数的电话号码"/></p>
        <p><span>学校：</span>
        <select>
          <option>-请选择-</option>
          <option>云南民族大学</option>
          <option>昆明理工大学</option>
          <option>云南大学</option>
          <option>云南师范大学</option>
          <option>昆明医科大学</option>
        </select>
        </p>
        <p><span>校区：</span>
        <select>
          <optgroup label="昆明市">
          <option>呈贡区</option>
          <option>西山区</option>
          <option>五华区</option>
          <option>官渡区</option>
          <option>晋宁区</option>
          </optgroup>
           <optgroup label="北京">
          <option>东城区</option>
          <option>西城区</option>
          <option>朝阳区</option>
          <option>海淀区</option>
          </optgroup>
        </select>
        </p>
        <p><span>上传头像：</span><input type="file" /></p>
        <p><span>自我评价：</span><textarea cols="60" rows="8">评价的时候，请注意语言文明，多给文档分享人一些支持。</textarea>
        </p>
        
        <input type="submit"  value="提交"/>
        <input type="reset" value="重置"/>
        </form>
        </div>
</body>
</html>